<!--
 * @Author: your name
 * @Date: 2021-04-07 17:00:47
 * @LastEditTime: 2021-05-30 15:10:14
 * @LastEditors: Please set LastEditors
 * @Description: 药企资讯数据统计
 * @FilePath: /medicine-web/src/views/document/statitics/index.vue
-->
<template>
  <div class="document-statitics-container">
    <p class="font-pattern-8">数据统计</p>
    <!-- <customDateRanger @selectTimeRange="timeRange"></customDateRanger> -->
    <a-row style="margin-top: 30px;">
      <a-col :span="24">
        <lineChart :elementId="'line-chart__one'" :chartTitle="'肿瘤类型年化对比'" :chartData="chartData1"></lineChart>
      </a-col>
    </a-row>
    <a-row style="margin-top: 30px;">
      <a-col :span="24">
        <lineChart :elementId="'line-chart__two'" :chartTitle="'溶瘤病毒类型年化对比'" :chartData="chartData2"></lineChart>
      </a-col>
    </a-row>
    <a-row style="margin-top: 30px;" type="flex" justify="space-between" align="middle">
      <a-col style="width: 59%">
        <pieChart :elementId="'pie-chart__one'" :chartTitle="'溶瘤病毒/肿瘤类型统计'" :outterData="outterData" :innerData="innerData"></pieChart>
      </a-col>
      <a-col style="width: 39%">
        <pieChart3 :elementId="'pie-chart__two'" :chartTitle="'药企类型'" :chartData="chartData3"></pieChart3>
      </a-col>
    </a-row>
    <a-row style="margin-top: 30px;" type="flex" justify="space-between" align="middle">
      <a-col style="width: 49%">
        <barChart3 :elementId="'bar-chart__two'" :chartTitle="'国内病毒类型'" :chartData="chartData4"></barChart3>
      </a-col>
      <a-col style="width: 49%">
        <barChart3 :elementId="'bar-chart__three'" :chartTitle="'国外病毒类型'" :chartData="chartData5"></barChart3>
      </a-col>
    </a-row>
  </div>
</template>
<script>
import customDateRanger from '@/components/CustomDateRanger/index'
import lineChart from '@/components/Charts/LineChart'
import pieChart from '@/components/Charts/PieChart'
import pieChart2 from '@/components/Charts/PieChart2'
import pieChart3 from '@/components/Charts/PieChart3'
import barChart3 from '@/components/Charts/BarChart3'
import barChart5 from '@/components/Charts/BarChart5'
import barChart6 from '@/components/Charts/BarChart6'
import barChart4 from '@/components/Charts/BarChart4'
export default {
  name: 'realStatitics',
  components: { customDateRanger, lineChart, pieChart, pieChart2, pieChart3, barChart5, barChart6, barChart4, barChart3 },
  data () {
    return {
      chartData1: [
        // { color: '#6495F9',  year: '2009年', type: '肝癌', data: 820 },
        // { color: '#6495F9',  year: '2009年', type: '恶性胸腹水', data: 932 },
        // { color: '#6495F9',  year: '2009年', type: '头颈部癌', data: 901 },
        // { color: '#6495F9',  year: '2009年', type: '黑色素瘤', data: 934 },
        // { color: '#6495F9',  year: '2009年', type: '肺癌', data: 1290 },
        // { color: '#6495F9',  year: '2009年', type: '宫颈癌', data: 1330 },
        // { color: '#6495F9',  year: '2009年', type: '胶质瘤', data: 1320 },
        // { color: '#6495F9',  year: '2009年', type: '其他', data: 1600 },
        // { color: '#62DAAA',  year: '2010年', type: '肝癌', data: 720 },
        // { color: '#62DAAA',  year: '2010年', type: '恶性胸腹水', data: 332 },
        // { color: '#62DAAA',  year: '2010年', type: '头颈部癌', data: 201 },
        // { color: '#62DAAA',  year: '2010年', type: '黑色素瘤', data: 914 },
        // { color: '#62DAAA',  year: '2010年', type: '肺癌', data: 1190 },
        // { color: '#62DAAA',  year: '2010年', type: '宫颈癌', data: 1530 },
        // { color: '#62DAAA',  year: '2010年', type: '胶质瘤', data: 1320 },
        // { color: '#62DAAA',  year: '2010年', type: '其他', data: 1320 },
        // { color: '#5F7293',  year: '2011年', type: '肝癌', data: 720 },
        // { color: '#5F7293',  year: '2011年', type: '恶性胸腹水', data: 632 },
        // { color: '#5F7293',  year: '2011年', type: '头颈部癌', data: 901 },
        // { color: '#5F7293',  year: '2011年', type: '黑色素瘤', data: 834 },
        // { color: '#5F7293',  year: '2011年', type: '肺癌', data: 990 },
        // { color: '#5F7293',  year: '2011年', type: '宫颈癌', data: 1230 },
        // { color: '#5F7293',  year: '2011年', type: '胶质瘤', data: 1520 },
        // { color: '#5F7293',  year: '2011年', type: '其他', data: 1400 },
      ],
      chartData2: [
        // { color: '#6495F9',  year: '2009年', type: '肝癌', data: 820 },
        // { color: '#6495F9',  year: '2009年', type: '恶性胸腹水', data: 932 },
        // { color: '#6495F9',  year: '2009年', type: '头颈部癌', data: 901 },
        // { color: '#6495F9',  year: '2009年', type: '黑色素瘤', data: 934 },
        // { color: '#6495F9',  year: '2009年', type: '肺癌', data: 1290 },
        // { color: '#6495F9',  year: '2009年', type: '宫颈癌', data: 1330 },
        // { color: '#6495F9',  year: '2009年', type: '胶质瘤', data: 1320 },
        // { color: '#6495F9',  year: '2009年', type: '其他', data: 1600 },
        // { color: '#62DAAA',  year: '2010年', type: '肝癌', data: 720 },
        // { color: '#62DAAA',  year: '2010年', type: '恶性胸腹水', data: 332 },
        // { color: '#62DAAA',  year: '2010年', type: '头颈部癌', data: 201 },
        // { color: '#62DAAA',  year: '2010年', type: '黑色素瘤', data: 914 },
        // { color: '#62DAAA',  year: '2010年', type: '肺癌', data: 1190 },
        // { color: '#62DAAA',  year: '2010年', type: '宫颈癌', data: 1530 },
        // { color: '#62DAAA',  year: '2010年', type: '胶质瘤', data: 1320 },
        // { color: '#62DAAA',  year: '2010年', type: '其他', data: 1320 },
        // { color: '#5F7293',  year: '2011年', type: '肝癌', data: 720 },
        // { color: '#5F7293',  year: '2011年', type: '恶性胸腹水', data: 632 },
        // { color: '#5F7293',  year: '2011年', type: '头颈部癌', data: 901 },
        // { color: '#5F7293',  year: '2011年', type: '黑色素瘤', data: 834 },
        // { color: '#5F7293',  year: '2011年', type: '肺癌', data: 990 },
        // { color: '#5F7293',  year: '2011年', type: '宫颈癌', data: 1230 },
        // { color: '#5F7293',  year: '2011年', type: '胶质瘤', data: 1520 },
        // { color: '#5F7293',  year: '2011年', type: '其他', data: 1400 },
      ],
      outterData: [ // 外圈数据
        // { value: 1048, name: '重组人5型腺病毒', itemStyle: { color: '#76C3FE' } },
        // { value: 735, name: 'T-VEC', itemStyle: { color: '#B8E0FF' } },
        // { value: 580, name: 'T3011', itemStyle: { color: '#D8EEFF' } },
        // { value: 484, name: 'Pexa-Vec', itemStyle: { color: '#F7D266' } },
        // { value: 700, name: 'Reolysin', itemStyle: { color: '#FAE2A0' } },
        // { value: 600, name: 'DNX-2401', itemStyle: { color: '#FBECC0' } },
        // { value: 500, name: 'Pelareprep', itemStyle: { color: '#FDF3DA' } },
        // { value: 900, name: 'HF10', itemStyle: { color: '#F2858C' } },
        // { value: 800, name: 'Onys-015', itemStyle: { color: '#F6B2B5' } },
        // { value: 100, name: '其他', itemStyle: { color: '#F9D2D5' } },
      ],
      innerData: [ // 内圈数据
        // { value: 1048, name: '肝癌', itemStyle: { color: '#76C3FE' } },
        // { value: 735, name: '恶性胸腹水', itemStyle: { color: '#B8E0FF' } },
        // { value: 580, name: '头颈部癌', itemStyle: { color: '#D8EEFF' } },
        // { value: 484, name: '黑色素瘤', itemStyle: { color: '#F7D266' } },
        // { value: 700, name: '胰腺癌', itemStyle: { color: '#FAE2A0' } },
        // { value: 600, name: '肺癌', itemStyle: { color: '#FDF3DA' } },
        // { value: 500, name: '宫颈癌', itemStyle: { color: '#F2858C' } },
        // { value: 900, name: '胶质癌', itemStyle: { color: '#F6B2B5' } },
        // { value: 800, name: '其他', itemStyle: { color: '#F9D2D5' } },
      ],
      chartData3: [
        // { value: 1048, name: '国内', itemStyle: { color: '#8CB2FD' } },
        // { value: 735, name: '国外', itemStyle: { color: '#8CE5C2' } }
      ],
      chartData4: [
        // { type: '腺病毒', name: 'H101、H103', data: 49099 },
        // { type: '腺病毒', name: 'KH901', data: 37098 },
        // { type: '腺病毒', name: 'ADV-TK', data: 14870 },
        // { type: '腺病毒', name: 'EDS01', data: 37098 },
        // { type: '腺病毒', name: 'E10A', data: 37098 },
        // { type: '单纯疱疹病毒', name: 'T3011', data: 40988 },
        // { type: '单纯疱疹病毒', name: 'OH2', data: 9880 },
        // { type: '单纯疱疹病毒', name: 'OrienX010', data: 9880 },
        // { type: '牛痘病毒', name: 'TG6002', data: 9880 }
      ],
      chartData5: [
        // { type: '腺病毒', name: 'DNX-2401', data: 49099 },
        // { type: '腺病毒', name: 'ONCOS-102', data: 37098 },
        // { type: '腺病毒', name: 'Telomelysin (OBP-301)', data: 14870 },
        // { type: '腺病毒', name: 'CG0070', data: 37098 },
        // { type: '腺病毒', name: 'VCN-01', data: 37098 },
        // { type: '腺病毒', name: 'Onyx-015', data: 37098 },
        // { type: '腺病毒', name: 'ICOVIR5', data: 37098 },
        // { type: '腺病毒', name: 'Enadenotucirev (Colo-Adi ) ', data: 37098 },
        // { type: '腺病毒', name: 'ProstAtak ', data: 37098 },
        // { type: '单纯疱疹病毒', name: 'T-VEC', data: 40988 },
        // { type: '单纯疱疹病毒', name: 'HF10', data: 9880 },
        // { type: '单纯疱疹病毒', name: 'HSV1716', data: 9880 },
        // { type: '单纯疱疹病毒', name: 'G207', data: 9880 },
        // { type: '牛痘病毒', name: 'Pexa-vec', data: 9880 },
        // { type: '牛痘病毒', name: 'GL-ONC1', data: 9880 },
        // { type: '牛痘病毒', name: 'vvDD-CDSR', data: 9880 },
        // { type: '呼肠孤病毒', name: 'Reolysin', data: 9880 },
        // { type: '柯萨奇病毒', name: 'Cavatak', data: 9880 },
        // { type: '逆转录病毒载体', name: 'Toca 511', data: 9880 }
      ]
    }
  },
  methods: {
    timeRange (dateString) {
      console.log('timeRange===========', dateString)
    },
    async fetchData() {
      const res = await this.$action('getRealInfoStatitics')
      console.log('============fetchData==========', res)
      // 瘤种类型(年增长)
      if (res && res.tumor_type_year_data) {
        console.log('tumor_type_year_data', res.tumor_type_year_data)
        const years = Array.from(new Set(res.tumor_type_year_data.map(item => item.year)))
        this.chartData1 = res.tumor_type_year_data.map(item => {
          if (years.indexOf(item.year) == 0) {
            return {
              color: '#6495F9',
              year: item.year,
              data: item.data,
              type: item.type
            }
          } else if (years.indexOf(item.year) == 1) {
            return {
              color: '#62DAAA',
              year: item.year,
              data: item.data,
              type: item.type
            }
          } else {
            return {
              color: '#5F7293',
              year: item.year,
              data: item.data,
              type: item.type
            }
          }
        })
      }
      // 溶瘤病毒类型(年增长)
      if (res && res.virus_type_year_data) {
        console.log('virus_type_year_data', res.virus_type_year_data)
        const years = Array.from(new Set(res.virus_type_year_data.map(item => item.year)))
        this.chartData2 = res.virus_type_year_data.map(item => {
          if (years.indexOf(item.year) == 0) {
            return {
              color: '#6495F9',
              year: item.year,
              data: item.data,
              type: item.type
            }
          } else if (years.indexOf(item.year) == 1) {
            return {
              color: '#62DAAA',
              year: item.year,
              data: item.data,
              type: item.type
            }
          } else {
            return {
              color: '#5F7293',
              year: item.year,
              data: item.data,
              type: item.type
            }
          }
        })
      }
      // 瘤种类型(所有)
      if (res && res.tumor_type_data) {
        console.log('tumor_type_data', res.tumor_type_data)
        const tumor_type_data_dict = {
          '肝癌': '#76C3FE',
          '恶性胸腹水': '#B8E0FF',
          '头颈部癌': '#D8EEFF',
          '黑色素瘤': '#F7D266',
          '胰腺癌': '#FAE2A0',
          '肺癌': '#FDF3DA',
          '宫颈癌': '#F2858C',
          '胶质癌': '#F6B2B5',
          '其他': '#F9D2D5'
        }
        this.outterData = res.tumor_type_data.map(item => {
          return {
            value: item.value,
            name: item.name,
            itemStyle: { color: tumor_type_data_dict[item.name] }
          }
        })
      }
      // 溶瘤病毒类型(所有)
      if (res && res.virus_type_data) {
        console.log('virus_type_data', res.virus_type_data)
        const virus_type_data_dict = {
          '重组人5型腺病毒': '#76C3FE',
          'T-VEC': '#B8E0FF',
          'T3011': '#D8EEFF',
          'Pexa-Vec': '#F7D266',
          'Reolysin': '#FAE2A0',
          'DNX-2401': '#FBECC0',
          'Pelareprep': '#FDF3DA',
          'HF10': '#F2858C',
          'Onys-015': '#F6B2B5',
          '其他': '#F9D2D5'
        }
         this.innerData = res.virus_type_data.map(item => {
          return {
            value: item.value,
            name: item.name,
            itemStyle: { color: virus_type_data_dict[item.name] }
          }
        })
      }
      // 药企类型
      if (res && res.company_type_data) {
        const company_type_data_dict = {
          '国内': '#8CB2FD',
          '国外': '#8CE5C2'
        }
        console.log('company_type_data', res.company_type_data)
        this.chartData3 = res.company_type_data.map(item => {
          return {
            value: item.value,
            name: item.name,
            itemStyle: { color: company_type_data_dict[item.name] }
          }
        })
      }
      // 国内病毒类型
      if (res && res.internal_virus_data) {
        console.log('internal_virus_data', res.internal_virus_data)
        this.chartData4 = res.internal_virus_data ? res.internal_virus_data.reverse() : []
      }
      // 国外病毒类型
      if (res && res.external_virus_data) {
        console.log('external_virus_data', res.external_virus_data)
        this.chartData5 = res.external_virus_data ? res.external_virus_data.reverse() : []
      }
    }
  },
  mounted () {
    this.fetchData()
  }
}
</script>
<style lang="scss" scoped>
@import '~@/assets/styles/flex.scss';
@import '~@/assets/styles/common.scss';
.document-statitics-container {
  width: 1200px;
  margin: 0 auto;
  padding: 32px 0px 88px 0px;
}
</style>